<template>
  <div class="_wz_cent_main _wz_login">
    <div class="_wz_login_cent">
      <div class="_wz_login_cent_left">
        <img src="../../assets/icon_logo.png" style="width: 260px;"/>
      </div>
      <div class="_wz_login_cent_right">
        <div class="_wz_loginBack">
          <div class="_wz_loginBackConte">
            <div class="_wz_loginBack_title">
              <div>Hello</div>
              <div style="font-size: 24px;font-weight: 500;">欢迎您的到来</div>
            </div>
            <Form ref="formInline" :model="formInline" :rules="ruleInline">
              <FormItem prop="username">
                <i-input prefix="ios-contact" type="text" v-model="formInline.username" placeholder="请输入用户名" clearable />
              </FormItem>
              <FormItem prop="password">
                <i-input prefix="ios-lock-outline" password type="password" v-model="formInline.password" placeholder="请输入密码" @keyup.enter.native="handleSubmit('formInline')" />
              </FormItem>
            </Form>
            <Button type="primary" @click="handleSubmit('formInline')" long>登录</Button>
          </div>
        </div>
      </div>
    </div>

    <div class="_wz_foot" style="display: flex;align-items:center;justify-content:center;">
      <span>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13050902000086">
          <img src="../../assets/icon_Record.png" />
          冀公网安备 13050902000086号
        </a>
      </span>
      <span>
        <a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备18004049号</a>
      </span>
<!--      <span>CopyRight © 河北信达交通科技有限公司</span><span>技术支持：河北信达交通科技有限公司</span>-->
    </div>


    <Spin size="large" fix v-if="spinShow"></Spin>



    <!-- 修改密码 -->
    <Modal v-model="modifyPassword" title="修改密码" :mask-closable="false" :footer-hide="true" width="800" @on-visible-change="modifyPasswordFun">
      <changePassword v-if="modifyPassword"></changePassword>
    </Modal>

  </div>
</template>
<script>

import changePassword from './changePassword.vue'

export default {
  components: {
    changePassword
  },
  data() {
    return {
      modifyPassword:false,//修改密码
      spinShow:false,//本页加载
      formInline: {},
      ruleInline: {
        username: [
          {required: true, message: '请填写用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请填写密码', trigger: 'blur'}
        ]
      },
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
  },
  methods: {//执行的方法

    //登录
    handleSubmit(name) {
      let that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {
          that.formInline.grant_type = "password";
          that.formInline.scope = "read write";
          that.formInline.client_id = "xd-client-ayt";
          that.formInline.client_secret = "xd-secret-ayt";
          // that.formInline.client_id = "xd-client";
          // that.formInline.client_secret = "xd-secret";


          that.spinShow = true;
          let data = that.qs.stringify(that.formInline);

          //登录
          that.axios.post(that.apiUrl.oauthToken, data, {headers: {'Content-Type': "application/x-www-form-urlencoded"}}).then(res => {
            let loginData = {
              authority: [],////权限合并
              navList: [],//平台数据 + 菜单数据
              user: {},//用户数据
              access_token: res.data.access_token,//请求 token
              refresh_token: res.data.refresh_token//刷新 token
            };
            sessionStorage.setItem("loginData", JSON.stringify(loginData));
            //获取当前登录用户信息
            that.axios.post(that.apiUrl.webApi + '/system/login/userInfo', {}).then(res => {
              if (!!res) {
                var getNowUser = res.data.data;
                //企业信息
                that.axios.post(that.apiUrl.webApi + "/core/dept/coreDeptInfo", {uuid:getNowUser.deptUuid}).then(res => {
                  if (!!res) {
                    getNowUser.coreDeptEntity = res.data.data;


                    //获取菜单和按钮资源
                    that.axios.post(that.apiUrl.webApi + '/system/login/userMenu', {clientType:"pc"}).then(res => {
                      if (!!res) {
                        var resourcePc = JSON.parse(sessionStorage.getItem("loginData"));


                        var loginAllData = {
                          authority: res.data.data.buttons,////权限合并
                          navList: res.data.data.modules,//平台数据 + 菜单数据
                          user: getNowUser,//用户数据
                          access_token: resourcePc.access_token,//请求 token
                          refresh_token: resourcePc.refresh_token,//刷新 token
                        };
                        sessionStorage.setItem("loginData", JSON.stringify(loginAllData));

                        that.loadNav.loadNav();
                        that.spinShow = false;


                        //密码强度验证
                        var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*()])[0-9a-zA-Z!@#$%^&*()]{8,18}$/;   /*定义验证表达式*/
                        let agentPassword = reg.test(that.formInline.password);
                        sessionStorage.setItem("agentPassword", agentPassword);
                        if(!agentPassword){//弱密码
                          that.$Modal.confirm({
                            title: '密码强度',
                            content: '根据国家《网络安全法》要求，您的密码强度过低，请立刻修改！',
                            onOk: () => {
                              // that.personalCenter('changePassword');
                              that.modifyPassword = true;
                            },
                            onCancel: () => {//点击取消
                              //退出
                              that.exitFun();
                            }
                          })

                        }else{
                          //密码强度验证
                          that.$Message.success({
                            content: "登录成功",
                            onClose: function () {
                              sessionStorage.setItem("menuData", JSON.stringify({menus: [],id: 999}));//跳转首页
                              that.$router.push({
                                path: '/dept'//that.public.getHomePage() //
                              })
                            }
                          });
                        }
                      }
                    }).catch(err => {
                      that.spinShow = false;
                      console.log("失败", err)
                    })
                  }
                }).catch(err => {
                  console.log('失败', err);
                })
              }
            }).catch(err => {
              that.spinShow = false;
              console.log("失败", err)
            })


          }).catch(err => {
            that.spinShow = false;
            console.log("失败", err)
          })
        } else {
          that.$Message.error('请输入账号密码进行登录');
        }
      })
    },
    //退出
    exitFun(){
      let that = this;
      var data = {access_token: JSON.parse(sessionStorage.getItem('loginData')).access_token};
      data = that.qs.stringify(data);
      that.axios.post(that.apiUrl.logout, data, {headers: {'Content-Type': "application/x-www-form-urlencoded"}}).then().catch(err => {
        console.log('失败', err);
      })
      sessionStorage.clear();// 删除所有数据
    },
    //监听弹框
    modifyPasswordFun(data){
      if(!data){
        this.exitFun()
      }
    }
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="less">
._wz_login {
  width: 100%;
  height: 100%;
  background: url("../../assets/icon_bj.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  ._wz_login_cent{
    width: 800px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -400px;
    overflow: hidden;
    border-radius: 8px;
    ._wz_login_cent_left{
      width: 52%;
      height: 100%;
      float: left;
      background: #036abb;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ._wz_login_cent_right{
      width: 48%;
      float: left;
      height: 100%;
      background: #fff;
    }
  }




  ._wz_foot {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    background: #fff;
    overflow: hidden;
    a{
      color: #2c3e50;
    }

    span {
      margin: 0 15px;
      letter-spacing: 2px;
    }
    img{
      vertical-align: middle;
    }
  }




  ._wz_loginBack {
    width: 100%;
    height: 100%;
    padding: 50px 0 60px;

    ._wz_loginBackConte {
      width: 80%;
      margin: auto;
      .ivu-btn-primary{

      }

      input {
        border-top: 0px;
        border-right: 0px;
        border-left: 0px;
        border-radius: 0px;
        height: 40px;
      }
      .ivu-input-prefix{
        line-height: 40px;
      }
      button{
        margin: 20px 0 0 0;
        height: 40px;
        background: #036abb;
        border-color: #036abb;
      }

      ._wz_loginBack_title {
        padding: 20px 0 40px 0;

        div {
          font-size: 34px;
          font-weight: 600;
          color: #333;
          letter-spacing: 2px;
        }
      }
    }
  }
}
</style>
